<template>
	<view>
		<view class="container" @click="goActivityDetail">
			<image class="image" :src="activityInfo.listPictures|mmvImageUrl" mode=""></image>
			<view class="info">
				<text>{{activityInfo.activityName}}</text>
				<text>{{activityInfo.startTime + ' - ' + activityInfo.endTime}}</text>
				<text>{{activityInfo.activityType|activityTypes}}</text>
				<image class="img_point" src="https://qykh.shopec.com.cn/image-server/dz/activity_point.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: '',
		data() {
			return {

			}
		},
		props: {
			// 活动实体
			activityInfo: {
				type: Object,
				default () {
					return {}
				}
			},
		},
		mounted() {

		},
		methods: {
			goActivityDetail() {
               this.$emit('goActivityDetail', this.activityInfo);
			}
		}

	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 240rpx;
		border-radius: 16rpx;
		background-color: #fff;
		box-shadow: 0 0 68rpx 0 rgba(69, 69, 69, 0.13);
		display: flex;
		margin-bottom: 20rpx;
	}

	.image {
		width: 320rpx;
		height: 240rpx;
	}

	.info {
		width: 100%;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		padding: 32rpx 20rpx;
		color: #333;
		text-align: right;
        position: relative;
		text:nth-child(1) {
			font-size: 30rpx;
			font-weight: bold;
			display: -webkit-box;
			overflow: hidden;
			text-overflow: ellipsis;
			word-wrap: break-word;
			white-space: normal !important;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
		}

		text:nth-child(2) {
			width: 286rpx;
			height: 44rpx;
			line-height: 44rpx;
			align-self: flex-end;
			text-align: center;
			background-color: #ECECEC;
			border-radius: 4rpx;
			font-size: 20rpx;
			margin: 40rpx 0 25rpx 0;
		}

		text:nth-child(3) {
			color: #666666;
			font-size: 20rpx;
		}
        
		.img_point {
			position: absolute;
			left: 30rpx;
			bottom: 0;
			width: 130rpx;
			height: 70rpx;
		}
	}
</style>
